<template>
  <div>
    <slot name="buttons"></slot>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      border
      size="mini"
      style="width: 100%">
      <!--<el-table-column v-for="(item,index) in columns"-->
      <!--:prop="item.prop"-->
      <!--:label="item.label"-->
      <!--:width="item.width"-->
      <!--:type="item.type"-->
      <!--:index="item.indexMethod"-->
      <!--:fixed="item.fixed ==='' ? false :item.fixed"-->
      <!--:key="index">-->
      <!--</el-table-column>-->
      <el-table-column v-for="(item,index) in specialColumns"
                       :width="item.width"
                       :type="item.type"
                       :index="item.indexMethod"
                       :key="index">
      </el-table-column>
      <el-table-column v-for="(item,index) in columns"
                       :label="item.label"
                       :width="item.width"
                       :fixed="item.fixed ==='' ? false :item.fixed"
                       :key="index+10">
        <!--<template slot-scope="scope" v-if="item.type === 'date'">-->
          <!--{{scope.row[item.prop]}}-->
        <!--</template>-->
        <template slot-scope="scope">
          <slot :name="item.prop" :$row="scope.row">
            {{scope.row[item.prop]}}
          </slot>
          <!--{{ item.hylType === 'date' ? scope.row[item.prop]: scope.row[item.prop]}}-->
          <!--<slot name="createDateTime">test:</slot>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'hyl-table',
  props: {
    tableData: {
      type: Array
    },
    columns: {
      type: Array
    },
    specialColumns: {
      type: Array
    },
    buttons: {
      type: Object
    }
  },
  data () {
    return {
    }
  },
  methods: {
    handleClick (row) {
      console.log(row)
    },
    handleSelectionChange (val) {
      this.$emit('tableSelection', val)
    }
  }
}
</script>

<style scoped>

</style>
